<template>
	<view class="rule-packbox relative">
		<comMask v-model="isSetShowPopup" :isNeedReadedClose="isCanClose">
			<view :class="['rule-content', 'relative']">
				<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
					:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-content-bxg.png`"
					mode=""></image>
				
				<view class="flex-all-center title-content absolute">
					<!-- <image class="relative" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						style="width: 140rpx;height: 36rpx;"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-arrow-right.png`"
						mode=""></image> -->
						
					<view class="text-nowrap title-txt-top flex-all-center title-content-txt you-she-biao-ti-hei">
						{{ ruleName }}
					</view>
					
					<!-- <image class="relative" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						style="width: 140rpx;height: 36rpx;"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-arrow-left.png`"
						mode=""></image> -->
				</view>
				
				<view class="relative rule-detail" >
					<scroll-view
						:style="{
							'word-break': 'break-all',
							'word-wrap': 'break-word',
							'height': `100%`,
						}"
						scroll-y @scrolltolower="scrolltolower">
						<slot></slot>
					</scroll-view>
				</view>
				
				<view v-if="isShowPoolRuleTxt && isShowRuleTips" 
					:class="['text-nowrap', 'absolute', 'rule-tip']">
					<label class="flex-all-center relative" @click="isReadRule = !isReadRule">

						<view class="rule-tip-img relative flex-all-center"
							style="width: 32rpx;height: 32rpx;">
							<image 
								v-show="!isReadRule"
								src="/static/images/check.png"
								style="width: 32rpx;height: 32rpx;"
								class="bg" />
							<image 
								v-show="isReadRule"
								style="width: 32rpx;height: 32rpx;"
								src="/static/images/checked.png"
								class="relative" />
						</view>
						
						<view class="flex-align-items-center"> 请先阅读购买说明内容，勾选后<text class="rule-tip-txt" >今天</text>不再显示</view>
					</label>
				</view>

				<view @click="setCloseFun" class="flex-justify-content-center rule-btns absolute" :style="{ opacity: !isShowPoolRuleTxt ? (isCanClose ? '1' : '0.5') : '1' }">
					<image class="rule-btn-img" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-btn-img.png`" mode=""></image>
				</view>
				
			</view>
		</comMask>
	</view>
</template>

<script>
	import {
		getRewardViewAgreementHitApi,
	} from '@/setupproject/INTERFACE.js';
	
	export default {
		name: "comRuleUppop",
		props: {
			isShowCheckRuleFlag: {
				type: Boolean,
				default: () => true
			},
			type:{
				type:String,
				default: () => ''
			},
			ruleName:{
				type:String,
				default: () => '规则说明'
			},
			value: {
				type: Boolean,
				default: () => true
			},
			isAllowedClickMaskClose: {
				type: Boolean,
				default: () => true,
			},
			isNeedReadedClose: {
				type: Boolean,
				default: () => true,
			},
			isShowPoolRuleTxt: {
				type: Boolean,
				default: () => false
			},
			ruleTypeValue: {
				type: Number,
				default: () => 0
			},
		},
		data() {
			return {
				ruleImgLink: '',
				isShowRuleTips: true,
				isReadRule: false,
			}
		},
		computed: {
			isSetShowPopup: {
				get() {
					return this.value
				},
				set(v) {
					this.$emit('input', v)
				},
			},
			isCanClose() {
				return this.isAllowedClickMaskClose || this.isNeedReadedClose;
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		watch: {
			isShowCheckRuleFlag(v) {
				this.isShowRuleTips = v
			},
			type: {
				handler() {
					let url = '';
					if(this.type === 'infinite') {
						// 飞机赏
						url = `${this.commonConfigs.domainFrontFileLink}/files/images/common/infinite-desc-bg.png`;
					}else if(this.type === 'ouhuang') {
						// 欧皇赏
						url = `${this.commonConfigs.domainFrontFileLink}/files/images/common/mowang-desc-bg.png`;
					}else if(this.type === 'all') {
						// 擂台赏
						url = `${this.commonConfigs.domainFrontFileLink}/files/images/common/all-bg.png`;
					}else if(this.type === 'pk') {
						// 天梯竞技
						url = `${this.commonConfigs.domainFrontFileLink}/files/images/common/pk-desc-bg.png`;
					}else if(this.type === 'treasure') {
						// 夺宝赏
						url = `${this.commonConfigs.domainFrontFileLink}/files/images/common/treasure-bg.png`;
					}else if(this.type === 'aplus') {
						// 一番赏
						url = `${this.commonConfigs.domainFrontFileLink}/files/images/common/aplus-bg.png`;
					}else if(this.type === 'diybox') {
						// diy开箱
						url = `${this.commonConfigs.domainFrontFileLink}/files/images/common/diybox-bg.png`;
					}else if(this.type === 'lockbox') {
						// 普通开箱
						url = `${this.commonConfigs.domainFrontFileLink}/files/images/common/openbox-bg.png`;
					}else if(this.type === 'challenge') {
						// 闯关
						url = `${this.commonConfigs.domainFrontFileLink}/files/images/common/challenge-bg.png`;
					}else if(this.type === 'competition') {
						// 寻梦大千
						url = `${this.commonConfigs.domainFrontFileLink}/files/images/common/competition-bg.png`;
					}
					this.ruleImgLink = url;
				},
				immediate: true,
				deep: true
			}
		},
		created() {
			
		},
		methods: {
			setCloseFun() {
				if(this.isShowPoolRuleTxt){
					if(this.isReadRule) {
						getRewardViewAgreementHitApi({id: this.ruleTypeValue}).then(res => {
							if(res.code === 200) {
								this.isShowRuleTips = false;
							}
						})
					}
				}else{
					if (!this.isCanClose) return uni.showToast({
						title: "请阅读到底部",
						icon: "none"
					})
				}
				
				this.isSetShowPopup = false;
				return false;
			},
			scrolltolower(v) {
				this.$emit('scrolltolower', v)
			}
		},
	}
</script>

<style scoped lang="scss">
	.rule-packbox {
		color: #111111;
		z-index: 100000;
		
		.rule-content {
			z-index: 100000;
			left: 0;
			width: 690rpx;
			height: 747rpx;
			transition: .55s all;
			padding-bottom: 20rpx;
			// top: -120rpx;
			
			.title-content {
				width: 100%;
				height: 60rpx;
				color: #FFFFFF;
				top: -90rpx;
				.title-content-txt {
					font-size: 64rpx;
					color: #FFFFFF;
					margin: 0 18rpx;
					-webkit-text-stroke: 4rpx #4470FF; 
					font-weight: bold;
				}
			}
			
			.rule-detail {
				z-index: 100;
				width: 642rpx;
				height: 680rpx;
				margin: auto;
				padding: 40rpx 30rpx 10rpx;
				color: #FFFFFF;
			}
			
			.rule-tip{
				z-index: 100000;
				font-size: 24rpx;
				bottom: 52rpx;
				color: #FFFFFF;
				width: 100%;
				
				.rule-tip-txt{
					color: #E3670E;
				}
				
				.rule-tip-img{
					margin-right: 18rpx;
					width: 26rpx;
					height: 26rpx;
					flex-shrink: 0;
				}
			}
			
			.rule-btns{
				left: 50%;
				transform: translateX(-50%);
				bottom: -100rpx;
				.rule-btn-img{
					width: 168rpx;
					height: 68rpx;
				}
			}
			
			.competition-rule-btns{
				left: 50%;
				transform: translateX(-50%);
				bottom: -130rpx;
				.rule-btn-img{
					width: 480rpx;
					height: 87rpx;
				}
			}
			
		}
	}	
</style>
